<script setup>
import { ref,onMounted } from 'vue'
import { queryItemAll,addItemDate,queryItemById,updateItemDate } from '../../api/item'
import { queryCategoryAll } from '../../api/category'
import { getSupplierAllList } from '../../api/supplier'
import { ElMessage } from 'element-plus'
//导入富文本框
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

//供应商的数据
const supplierData = ref([])
const supplierAllList = async ()=>{ 
  const result = await getSupplierAllList()
  supplierData.value = result.data
}
//分类数据
const getCategory  = async ()=>{
  const result = await queryCategoryAll()
  categoryData.value = result.data
}
//分类数据变量
const categoryData = ref([])
const props = {value:'id',label:'name',children:'children'}
//条件分页
const queryItem = async () => { 
  const result = await queryItemAll(page.value, pageSize.value, itemDate.value.name, itemDate.value.code, itemDate.value.category)
  tableData.value = result.data.rows
  total.value = result.data.total
}
//清空数据
const clear = () => { 
  itemDate.value = { name: '', code: '', category: ''}
  queryItem()
}
//定义表当数据
const itemDate = ref({ name: '', code: '', category: ''})
//定义表格数据
const tableData = ref([])
//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
}
const handleCurrentChange = (val) => {
}
//数据预加载
onMounted(() => {
  supplierAllList()
  queryItem()
  getCategory()
})

//对话框的变量
//定义弹出框的数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({code:'',title:'',categoryId:[],description:'',supplierId:'',brand:'',skuList:[]})

//添加sku的点击事件
const addSkuList = () =>{ 
  dialogData.value.skuList.push({skutitle:'',unit:'',skucode:'',productWeight:'',productLength:'',productWidth:'',productHeight:'',productVolume:'',price:'',realPrice:''})
}
//删除sku的点击事件
const deleteSkuList = (index) =>{ 
  dialogData.value.skuList.splice(index,1)
}

//添加spu的点击事件
const saveItem = () =>{ 
  title.value = '添加商品'
  dialogShow.value = true
  // 清空表单校验
  if(ruleFormRef.value){
    ruleFormRef.value.resetFields()
  }
  //清空表单数据
  dialogData.value = {title:'',code:'',category:'',brand:'',price:'',stock:'',sales:'',status:'',
  skuList:[]}
}

//保存商品信息的点击事件
const saveItemInfo = () => { 
  if (!ruleFormRef) return
  ruleFormRef.value.validate(async (valid, fields) => {
    let result = null
    if (valid) {//表单验证成功
      if(dialogData.value.id){
        // //修改商品信息
        result = await updateItemDate(dialogData.value)
      }else{
        //添加商品信息
        result = await addItemDate(dialogData.value)
      }
    } else {
      console.log('error submit!', fields)
    }
  if(result.code){ 
    dialogShow.value = false
    queryItem()
    ElMessage.success('操作成功！')
  }else{ 
    ElMessage.error('操作失败！请重新操作')
  }
})
}

//回显商品
const getItemById = async (id)=>{ 
  dialogShow.value = true
  const result = await queryItemById(id)
  title.value = '编辑商品信息'
  dialogData.value = result.data
  // 清空表单校验
  if(ruleFormRef.value){
    ruleFormRef.value.resetFields()
  }
}

//定义表单引用的ref
const ruleFormRef = ref(null)

// 验证规则
const rules = ref({
  code: [
    { required: true, message: '请输入商品编号', trigger: 'blur' },
    { min: 2, max: 50, message: '商品编号长度应在2到50个字符之间', trigger: 'blur' }
  ],
  title: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
    { min: 2, max: 20, message: '商品名称长度应在2到20个字符之间', trigger: 'blur' }
  ],
  brand: [
    { required: true, message: '请输入商品品牌', trigger: 'blur' },
    { min: 2, max: 50, message: '商品品牌长度应在2到50个字符之间', trigger: 'blur' }
  ],
});
</script>
<template>
<div><h3>商品管理</h3></div>
<div>
  <el-form :inline="true" :model="itemDate" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="saveItem"><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="itemDate.name" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="商品编号">
      <el-input v-model="itemDate.code" placeholder="请输入编号" />
    </el-form-item>
    <el-form-item label="商品类别">
      <el-input v-model="itemDate.category" placeholder="请输入类别" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryItem">查询</el-button>
      <el-button type="default" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>

<div>
    <el-table :data="tableData" style="width: 100%" row-key="id"
      border
      :tree-props="{ children: 'skuList', hasChildren: 'hasChildren' }"
    >
      <el-table-column fixed type="index" label="序号" align="center" width="80"/>
      <el-table-column prop="code" label="商品编码" align="center" width="120"/>
      <el-table-column prop="title" label="商品名称" align="center" width="120"/>
      <el-table-column prop="categoryName" label="商品类别" align="center" width="120"/>
      <el-table-column prop="description" label="商品描述" align="center" width="120"/>
      <el-table-column prop="supplierName" label="供应商名称" align="center" width="120"/>
      <el-table-column prop="brandName" label="品牌" align="center" width="120"/>
      <el-table-column prop="code" label="商品条码" align="center" width="120"/>
      <el-table-column prop="productWeight" label="商品重量" align="center" width="120"/>
      <el-table-column prop="productLength" label="商品长度" align="center" width="120"/>
      <el-table-column prop="productWidth" label="商品宽度" align="center" width="120"/>
      <el-table-column prop="productHeight" label="商品高度" align="center" width="120"/>
      <el-table-column prop="productVolume" label="商品体积" align="center" width="120"/>
      <el-table-column prop="price" label="商品成本" align="center" width="120"/>
      <el-table-column prop="realPrice" label="商品价格" align="center" width="120"/>
      <el-table-column fixed="right" label="操作" align="center" width="120">
      <template #default="scope">
        <el-button size="small" @click="getItemById(scope.row.id)"><el-icon><EditPen /></el-icon></el-button>
        <el-button size="small" @click=""><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
    </el-table>
</div>
<div>
  <el-pagination
    v-model:current-page="page"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>

<!-- 弹出框 -->
<el-dialog v-model="dialogShow" :title="title" width="700" align-center>
  <el-form :model="dialogData"  :rules="rules" ref="ruleFormRef">
    <el-form-item label="商品编号" :label-width="formLabelWidth" prop="code">
      <el-input v-model="dialogData.code" placeholder="请输入编号" />
    </el-form-item>
    <el-form-item label="商品名称" :label-width="formLabelWidth" prop="title">
      <el-input v-model="dialogData.title" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="商品类别" :label-width="formLabelWidth">
      <el-cascader v-model="dialogData.categoryId" :options="categoryData" :props="props" placeholder="请选择类别"/>
    </el-form-item>
    <el-form-item label="商品描述" :label-width="formLabelWidth">
      <QuillEditor v-model:content="dialogData.description"
        contentType="text"
        theme="snow"
        style="height: 200px;width: 388px"
        placeholder="请输入商品描述..."
      />
    </el-form-item>
    <el-form-item label="供应商名称" :label-width="formLabelWidth">
      <el-select v-model="dialogData.supplierId" placeholder="请选择">
        <el-option v-for="item in supplierData" :label="item.supplierName" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="品牌" :label-width="formLabelWidth" prop="brand">
      <el-input v-model="dialogData.brand" placeholder="请输入品牌" />
    </el-form-item>


    <el-form-item>
      <el-button type="success" @click="addSkuList" ><el-icon><CirclePlus /></el-icon></el-button>
    </el-form-item>
    <el-scrollbar>
        <el-row :gutter="100" v-for="(item,index) in dialogData.skuList" :key="index"  class="scrollbar-flex-content">
        <el-col :span="2">
          <el-form-item fixed label="规格名称" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.skutitle" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="规格单位" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.unit" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="规格条码" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.skucode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="商品重量" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.productWeight" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="商品长度" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.productLength" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="商品宽度" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.productWidth" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="商品高度" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.productHeight" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="商品体积" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.productVolume" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="商品成本" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.price" placeholder="请输入职位"/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="商品价格" :label-width="formLabelWidth" style="width: 200px;">
            <el-input v-model="item.realPrice" placeholder="请输入职位"/>
          </el-form-item>
        </el-col>
        <el-col :span="2"><el-button fixed="right" @click="deleteSkuList(index)"><el-icon><CloseBold /></el-icon></el-button></el-col>
      </el-row>
    </el-scrollbar>
    
  </el-form>
  <template #footer>
    <el-button @click="dialogShow = false" type="default">取消</el-button>
    <el-button type="primary" @click="saveItemInfo">确定</el-button>
  </template>
</el-dialog>

</template>
<style scoped>
.scrollbar-flex-content {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
}
.el-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
}
</style>